<template>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeInDown"
    leave-active-class="animated fadeOutUp"
  >

    <div class="modal-ctrl-body" v-if="addModalObj.isShow">
      <div class="modal-ctrl-main map-ctrl">
        <div class="modal-title">
          <p>新增一场四站信息</p>
        </div>
        <div class="modal-ctrl-content clear-false">

          <div class="map-body f-l">
            <pointMap
              ref="pointMapRef"
              :point="point"
              :actionType="actionType"
              @polygonGraphic="polygonGraphic"
              @pointCoordinate="pointCoordinate"
              @removeAll="removeAllFn"
            ></pointMap>
          </div>
          <div class="map-body f-l" :style="{right: openMapDataContentIsShow ? '0':'-640px'}">

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l indispensable">
                所属类别：
              </div>
              <select @change="selectType" v-model="AddData.TYPES" class="modal-text">
                <option value="-1">所属类别</option>
                <option value="1">火车站</option>
                <option value="2">机场</option>
              </select>
            </div>

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l indispensable">
                名称：
              </div>
              <input type="text" maxlength="16" placeholder="最长16个字符" v-model="AddData.NAME" class="modal-text f-l">
            </div>

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l indispensable">
                地址：
              </div>
              <input type="text" maxlength="64" placeholder="最长64个字符" v-model="AddData.ADDRESS" class="modal-text f-l">
            </div>

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l indispensable">
                经度：
              </div>
              <input v-model="AddData.LONGITUDE" type="text" maxlength="12" class="modal-text f-l">
            </div>

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l indispensable">
                纬度：
              </div>
              <input v-model="AddData.LATITUDE" type="text" maxlength="11" class="modal-text f-l">
            </div>

            <div class="modal-row f-l">
              <div class="modal-form-key f-l indispensable">
                类型：
              </div>
              <select @change="selectCategoryList" v-model="AddData.CATEGORY" class="modal-text">
                <option value="-1">类型</option>
                <option :value="item.targetMenuCode" v-for="item in categoryList">{{item.name}}</option>
              </select>
            </div>

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l indispensable">
                所属单位：
              </div>
              <select @change="selectDistrict" v-model="AddData.DISTRICT" class="modal-text">
                <option value="-1">选择所属单位</option>
                <option v-for="item in areaList" :value="item.targetMenuCode">{{ item.name }}</option>
                <!--  <option value="CD">蔡甸</option>
                  <option value="DH">东湖</option>
                  <option value="DXH">东西湖</option>
                  <option value="DX">东新</option>
                  <option value="HY">汉阳</option>
                  <option value="HS">洪山</option>
                  <option value="HP">黄陂</option>
                  <option value="JA">江岸</option>
                  <option value="JH">江汉</option>
                  <option value="JX">江夏</option>
                  <option value="KFQ">开发区</option>
                  <option value="QK">硚口</option>
                  <option value="QS">青山</option>
                  <option value="WC">武昌</option>
                  <option value="XZ">新洲</option>-->
              </select>
            </div>


            <div class="modal-row f-l" >
              <div class="modal-form-key f-l">
                服务电话：
              </div>
              <input type="text" v-model="AddData.PHONE" class="modal-text f-l">
            </div>


            <div class="modal-row f-l" >
              <div class="modal-form-key f-l">
                规模：
              </div>
              <input type="text" maxlength="64" placeholder="最长64个字符" v-model="AddData.SCALE" class="modal-text f-l">
            </div>

            <!--火车站独有-->
            <div class="modal-row f-l" >
              <div class="modal-form-key f-l">
                建筑面积：
              </div>
              <input type="text" maxlength="16" placeholder="最长16个字符" v-model="AddData.BUILDING_AREA" class="modal-text f-l">
            </div>
            <!--火车站独有闭合-->

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l">
                建成时间：
              </div>
              <div class="input-group date" id="date1">
                <span class="input-group-addon glyphicon glyphicon-list"><i class="fa fa-calendar"></i></span>
                <input type="hidden" ref="birthday" name="birthday">
                <input type="text" readonly="readonly" id="datetimepicker" class="form-control" required="required" data-date-format="dd-mm-yyyy">
              </div>
              <!-- <input type="text" readonly="readonly" v-model="AddData.BUILD_TIME" class="modal-text f-l">-->
            </div>

            <!--飞机场独有-->
            <div class="modal-row f-l" v-show="AddData.TYPES === '2'">
              <div class="modal-form-key f-l">
                跑道长度：
              </div>
              <input type="text" maxlength="16" placeholder="最长16个字符" v-model="AddData.RUNWAY_DISTANCE" class="modal-text f-l">
            </div>

            <div class="modal-row f-l" v-show="AddData.TYPES === '2'">
              <div class="modal-form-key f-l">
                机场代码：
              </div>
              <input type="text" maxlength="16" placeholder="最长16个字符" v-model="AddData.AIRPORT_CODE" class="modal-text f-l">
            </div>

            <div class="modal-row f-l" v-show="AddData.TYPES === '2'">
              <div class="modal-form-key f-l">
                飞行区等级：
              </div>
              <input type="text" maxlength="16" placeholder="最长16个字符" v-model="AddData.FLY_AREA_LEVEL" class="modal-text f-l">
            </div>

            <div class="modal-row f-l" v-show="AddData.TYPES === '2'">
              <div class="modal-form-key f-l">
                机位数量：
              </div>
              <input type="text" v-model="AddData.POSITION_NUMBER" class="modal-text f-l">
            </div>

            <div class="modal-row f-l" v-show="AddData.TYPES === '2'">
              <div class="modal-form-key f-l">
                客运航线：
              </div>
              <input type="text" maxlength="16" placeholder="最长16个字符" v-model="AddData.ROUTE" class="modal-text f-l">
            </div>
            <!--飞机场独有闭合-->

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l">
                备注：
              </div>
             <!-- <input type="text" v-model="AddData.COMMENTS" class="modal-text f-l">-->
              <textarea v-model="AddData.COMMENTS" maxlength="100" class="modal-text f-l"></textarea>
            </div>
            <div class="clear-true"></div>
            <div class="modal-row f-l" >
              <div class="modal-form-key f-l indispensable">
                大图标：
              </div>
              <img class="icon-img" @click="selectBigImgShow" :src="bigDisplayImg|setDisplayImg" v-model="bigDisplayImg" alt="">
              <div class="select-icon-body" v-show="selectObj.bigSelect">
                <i class="closeBtn" @click="selectBigImgShow">X</i>
                <ul class="select-icon-list">
                  <li v-for="imgs in iconLis" @click="selectBigImg(imgs)">
                    <img class="icon-img" :src="imgs.STORE_ID|setDisplayImg" alt="">
                    <p>{{ imgs.NAME }}</p>
                  </li>
                </ul>
              </div>
            </div>

            <div class="modal-row f-l" >
              <div class="modal-form-key f-l indispensable">
                小图标：
              </div>
              <img class="icon-img" @click="selectSmallImgShow" :src="smallDisplayImg|setDisplayImg" v-model="smallDisplayImg" alt="">
              <div class="select-icon-body" v-show="selectObj.smallSelect">
                <i class="closeBtn" @click="selectSmallImgShow">X</i>
                <ul class="select-icon-list">
                  <li v-for="imgs in iconLis" @click="selectSmallImg(imgs)">
                    <img class="icon-img" :src="imgs.STORE_ID|setDisplayImg" alt="">
                    <p>{{ imgs.NAME }}</p>
                  </li>
                </ul>
              </div>
            </div>

            <div class="clear-float"></div>

            <div class="import-point-body">
              <p class="title">防控圈信息</p>
              <div class="point-list-body">

                <div v-for="(graphicsItemsItem,index) in graphicsItems" class="point-list clear-true">
                  <button class="btn btn-warning" @click="deleteListPoint(graphicsItemsItem,index)">删除</button>
                  <div class="clear-float"></div>
                  <div class="modal-row f-l" >

                    <div class="modal-form-key f-l indispensable">
                      名称：
                    </div>
                    <input v-model="graphicsItemsItem.name" maxlength="16" placeholder="最长16个字符" type="text" class="modal-text f-l">
                  </div>

                  <div class="modal-row f-l" >
                    <div class="modal-form-key f-l indispensable">
                      等级：
                    </div>
                    <select @change="selectLevel" v-model="graphicsItemsItem.level" class="modal-text">
                      <option value="-1">选择等级</option>
                      <option value="1">一级</option>
                      <option value="2">二级</option>
                      <option value="3">三级</option>
                    </select>
                  </div>

                  <div class="modal-row f-l" >
                    <div class="modal-form-key f-l">
                      查询人流：
                    </div>
                    <input maxlength="16" placeholder="最长16个字符" v-model="graphicsItemsItem.flow" type="text" class="modal-text f-l">
                  </div>


                  <div class="modal-row f-l">
                    <div class="modal-form-key f-l">
                      填充颜色：
                    </div>
                    <input type="color" @change="changeColor($event,graphicsItemsItem)" v-model="graphicsItemsItem.style.color" style="width: 60%;height: 30px;">
                  </div>

                </div>

              </div>
            </div>

          </div>
          <div class="map-data-show"
               :style="{right: openMapDataContentIsShow ? '600px':'-40px'}"
               @click="openMapDataContent"
               title="录入地图信息"
          >
            <span class="glyphicon"
                  :class="{'glyphicon-chevron-left':!openMapDataContentIsShow,'glyphicon-chevron-right':openMapDataContentIsShow}">
            </span>
            <span class="glyphicon"
                  :class="{'glyphicon-chevron-left':!openMapDataContentIsShow,'glyphicon-chevron-right':openMapDataContentIsShow}">
            </span>
          </div>
        </div>
        <div class="btns text-r">
          <button type="button" class="btn btn-default" @click="close">取消</button>
          <button type="button" class="btn btn-info" @click="subBtn">确定</button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
    import pointMap from "../../map/pointMap/pointMap"
    export default {
        name: "AddAirportsAndRailwayStationsModal",
        props:["addModalObj"],
        data(){
          return{
            AddData:{  //火车站与机场公用信息
              NAME:"",//名称
              LONGITUDE:"",//经度
              LATITUDE:"",//纬度
              DISTRICT:"-1",//所属单位
              BIG_IMAGE:"",//大图
              SMALL_IMAGE:"",//小图
              ADDRESS:"",//地址
              PHONE:"",//服务电话
              BUILD_TIME:"",//建成时间
              SCALE:"",//规模
              BUILDING_AREA:"",//建筑面积
              MAP_CODE:"",//地图标识符
              CREATE_USER:"",//创建人
              COMMENTS:"",//备注
              TYPES:"-1",//所属类别
              AIRPORT_CODE:"",//机场代码
              FLY_AREA_LEVEL:"",//飞行区等级
              POSITION_NUMBER:"",//机位数量
              RUNWAY_DISTANCE:"",//跑到长度
              ROUTE:"",//客运航线
              CONTROL_CIRCLE:"",//防控圈
              CATEGORY:"-1",//类型
            },
            setting : {
              data: {
                simpleData: {
                  enable: true
                },
              }
            },
            smallDisplayImg:"static/img/upicon.png",
            bigDisplayImg:"static/img/upicon.png",
            sectionTreeIShow:false,
            stationName:"",
            iconLis:[],
            selectObj:{
              bigSelect:false,
              smallSelect:false,
            },
            point:[114.21868761726246, 30.584733852070247],
            actionType:null,
            graphicAry:[],
            graphicsItems:[],
            mapCodeArr:[],
            areaList:[],
            categoryList:[],
            openMapDataContentIsShow:false
          }
        },
        components:{
          pointMap
        },
        filters:{
          setDisplayImg:function(src){
            let value = "";
            ////console.log(src.match(/static/));
            src = src ? src : "static/img/upicon.png";
            if( src.match(/static/) ){
              value = src.match(/static/).input;
            }else{
              value = baseURL +"api/jp-TIFS-FileCenter-ms/file?businessId="+src;
            }
            return value;
          }
        },
        watch:{
          addModalObj:{
            handler(v1){
              if( v1.isShow ){
                //获取所属地区
                this.getAreaList();
                let _this = this;
                $(function () {
                  //console.log($("#datetimepicker"));
                  $('#date1').datetimepicker({
                    language: "zh-CN",
                    format: "yyyy-mm-dd",
                    minView: "month",
                    autoclose: true
                  }).on("changeDate",function(ev){
                    ////console.log(ev.date.valueOf());
                    let selectDate = ev.date.valueOf();
                    let theDate = new Date().getTime(); //当前时间
                    if( selectDate >= theDate ){
                      _this.s_alert("选择时间不能是未来时间！");
                      $(".form-control").val("");
                      $(".form-control").prev().val("");
                    }
                  });
                });
              }
            },
            deep:true
          }
        },

        methods:{
          //提交
          subBtn(){
            this.AddData.CREATE_USER = this.isLogin().userId;
            this.AddData.BUILD_TIME = this.$refs.birthday.value;
            //console.log(this.AddData);
            if( this.verifyForm.isNull(this.AddData.TYPES) ){
              this.s_alert("类别不能为空！");
              return false;
            }else if( this.verifyForm.isNull(this.AddData.NAME) ){
              this.s_alert("名称不能为空！");
              return false;
            }else if( this.verifyForm.isNull(this.AddData.ADDRESS) ){
              this.s_alert("地址不能为空！");
              return false;
            }else if( this.verifyForm.isNull(this.AddData.LONGITUDE) || this.verifyForm.ifLongitude(this.AddData.LONGITUDE) ){
              this.s_alert("经度为空或格式不正确！");
              return false;
            }else if( this.verifyForm.isNull(this.AddData.LATITUDE) || this.verifyForm.ifLatitude(this.AddData.LATITUDE) ){
              this.s_alert("纬度为空或格式不正确！");
              return false;
            }else if( this.verifyForm.isNull(this.AddData.DISTRICT) ){
              this.s_alert("所属单位不能为空！");
              return false;
            }else if( this.verifyForm.isNull(this.AddData.BIG_IMAGE) ){
              this.s_alert("大图不能为空！");
              return false;
            }else if( this.verifyForm.isNull(this.AddData.SMALL_IMAGE) ){
              this.s_alert("小图不能为空！");
              return false;
            }else if( this.verifyForm.isIphoneOrTell(this.AddData.PHONE) ){
              this.s_alert("服务电话格式不正确！");
              return false;
            }else if( this.verifyForm.isNull(this.AddData.CATEGORY) ){
              this.s_alert("类型不能为空！");
              return false;
            }else if( this.verifyForm.isNumber(this.AddData.POSITION_NUMBER) ){
              this.s_alert("机位数量只能为整数！");
              return false;
            }

            //重要点位信息验证
            if( this.graphicsItems.length > 0 ){
              for( let i=0;i<this.graphicsItems.length;i++ ){
                if( this.verifyForm.isNull(this.graphicsItems[i].name) ){
                  this.s_alert("第"+ (i+1) +"个防控圈的名称不能为空！");
                  return false;
                }else if( this.verifyForm.isNull(this.graphicsItems[i].level) ){
                  this.s_alert("第"+ (i+1) +"个防控圈的等级不能为空！");
                  return false;
                }
              }
            }
            if( this.graphicAry.length > 0 ){
              let self = this;
              subMap(0);
              //新增地图 防控圈
              function subMap(i){
                self.$axios({
                  method: 'post',
                  async:false,
                  url: mapFeatureServer + '2/addFeatures', // 1 线 2 圈
                  data: 'f=json&features='+JSON.stringify([ {"geometry":self.graphicAry[i].geometry} ]),
                  headers: {"Content-Type": "application/x-www-form-urlencoded"}
                }).then( res => {
                  //console.log(res);
                  //this.AddData.MAP_CODE = res.data.addResults[0].objectId;
                  //console.log(i);
                  //console.log(res.data.addResults[0].objectId);
                  self.graphicsItems[i]["mapCode"] = res.data.addResults[0].objectId;
                  i = i + 1;
                  if(i < self.graphicsItems.length){
                    subMap(i);
                  }else{
                    //console.log(self.graphicsItems);
                    self.subAARS()
                  }

                }).catch( err=>{
                  //console.log(err);
                } )
              }
            }else{
              this.subAARS();
            }

          },
          //新增提交
          subAARS(){
            let paramsKey = [];
            let paramsValue = [];
            if( this.graphicsItems.length > 0 ){
              this.AddData.CONTROL_CIRCLE = JSON.stringify(this.graphicsItems);
            }else {
              this.AddData.CONTROL_CIRCLE = "";
            }
            for( let kay in this.AddData ){
              paramsKey.push(kay);
              paramsValue.push(this.AddData[kay]);
            }
            //console.log(paramsKey);
            //console.log(paramsValue);
            let params ={
              "columns": paramsKey,
              "dataTypeCode": "pointresource",
              "datas": paramsValue,
              "tableName": "T_RES_AIRPORT_TRAIN_STATION"
            };
            //console.log(params);
            this.$axios.post(this.HOST+"/base/save",params)
              .then((data)=>{
                //console.log(data);
                if( data.data.success ){
                  this.s_alert("新增成功！");
                  this.s_logwrite("点位信息管理-一场四站管理","新增一场四站");
                  this.close();
                }
              })
              .catch((err)=>{
                //console.log(err);
              })
          },
          //获取所属地区
          getAreaList(){
            //POST /dictionary/{key}
           /* this.$axios.post(this.HOST+"/dictionary/area")
              .then(res=>{
                //console.log(res);
                this.areaList = res.data;

              })
              .catch(err=>{
                //console.log(err);
              })*/
            this.$axios.post(this.DotCtrl+"/mapDictionaryRelation/getRelationInfoList",{
              "parentMenuCode": "MAP_SSDW",
            })
              .then(res=>{
                /*   //console.log(1);
                   //console.log(res);*/
                let success = res.data;
                let list = [];
                for( let i=0;i<success.length;i++ ){
                  success[i].targetMenuCode = success[i].targetMenuCode.split("_")[1];
                  list.push(success[i]);
                }
                this.areaList = list;
                //console.log(this.areaList);
              })
              .catch(err=>{
                //console.log(err);
              })
          },
          //选择类别
          selectType(ele){
            ////console.log(ele.target.value);
            this.AddData.TYPES = ele.target.value;
            if( this.AddData.TYPES !== "2" ){ //四站
              this.AddData.RUNWAY_DISTANCE = "";
              this.AddData.AIRPORT_CODE = "";
              this.AddData.FLY_AREA_LEVEL = "";
              this.AddData.POSITION_NUMBER = "";
              this.AddData.ROUTE = "";
            }
          },
          //选择类别
          selectCategoryList(ele){
            //console.log(ele.target.value);
            this.AddData.CATEGORY = ele.target.value;
          },
          //加载图标库
          getIconAjax(){
            //GET /camera/fetchTAllCamera
            //console.log(this.HOST);
            let params = {
              "columns": ["*"],
              "conditions": [],
              "dataTypeCode": "pointresource",
              "pageSize": -1,
              "tableName": "T_RES_IMAGE_LIB"
            };
            //POST /base/query/page
            this.$axios.post(this.HOST+"/base/query/page",params)
              .then((data)=>{
                //console.log(data);
                this.iconLis = data.data.data.list;
                //console.log(this.iconLis);
              })
              .catch((err)=>{
                //console.log(err);
              })
          },
          //选择图标
          selectBigImg(img){
            //console.log(img);
            this.AddData.BIG_IMAGE = img.ID;
            this.bigDisplayImg = img.STORE_ID;
            this.selectBigImgShow()
          },
          selectSmallImg(img){
            this.AddData.SMALL_IMAGE = img.ID;
            this.smallDisplayImg = img.STORE_ID;
            this.selectSmallImgShow();
          },
          //大图选择
          selectBigImgShow(){
            this.selectObj.bigSelect = !this.selectObj.bigSelect
          },
          selectSmallImgShow(){
            this.selectObj.smallSelect = !this.selectObj.smallSelect
          },
          polygonGraphic(graphic){
            this.graphicAry.push(graphic) ;

            //console.log(graphic);
            //graphicsItems;
            let polygonData = {
              uid : graphic.attributes.uid,
              rings : graphic.geometry.rings,
              name: "",
              level: "-1",
              style: {"color":"#333333"},
              flow: "",
              mapCode:""
            };
            this.graphicsItems.push(polygonData);
            //console.log(this.graphicsItems);
          },
          //选择等级
          selectLevel(ele,graphicsItemsItem){
            ////console.log(ele.target.value);
            ////console.log(graphicsItemsItem);
          },
          //选择颜色
          changeColor(ele,item){
            //console.log(ele.target.value);
            //console.log(item.uid);
            this.$refs.pointMapRef.changeColor(item.uid,ele.target.value);
          },
          //清空所有地图信息
          removeAllFn(){
            this.graphicsItems = [];
            this.graphicAry = [];
          },
          //获取地图经纬度
          pointCoordinate(data){
            //console.log(data);
            this.AddData.LONGITUDE = data[0];
            this.AddData.LATITUDE = data[1];
          },
          //关闭弹出
          close(){
            this.$emit("closeModal");
            this.clearData();
          },
          //删除防控圈
          deleteListPoint(obj,index){
            //console.log(obj);
            //console.log(index);
            this.graphicsItems.splice(index,1);
            this.graphicAry.splice(index,1);
            this.$refs.pointMapRef.deleteRings(obj.uid);
          },
          //清除缓存
          clearData(){
            this.AddData={
              NAME:"",//名称
              LONGITUDE:"",//经度
              LATITUDE:"",//纬度
              DISTRICT:"-1",//所属单位
              BIG_IMAGE:"",//大图
              SMALL_IMAGE:"",//小图
              ADDRESS:"",//地址
              PHONE:"",//服务电话
              BUILD_TIME:"",//建成时间
              SCALE:"",//规模
              BUILDING_AREA:"",//建筑面积
              MAP_CODE:"",//地图标识符
              CREATE_USER:"",//创建人
              COMMENTS:"",//备注
              TYPES:"-1",//所属类别
              AIRPORT_CODE:"",//机场代码
              FLY_AREA_LEVEL:"",//飞行区等级
              POSITION_NUMBER:"",//机位数量
              RUNWAY_DISTANCE:"",//跑到长度
              ROUTE:"",//客运航线
              CONTROL_CIRCLE:"",//防控圈
              CATEGORY:"-1",//类型
            };
            this.graphicsItems = [];
            this.graphicAry = [];
            this.$refs.birthday.value = "";
            this.smallDisplayImg = "static/img/upicon.png";
            this.bigDisplayImg = "static/img/upicon.png";
            this.openMapDataContentIsShow = false;
          },
          //所属单位
          selectDistrict(ele){
            //console.log(ele.target.value);
            this.AddData.DISTRICT = ele.target.value;
          },
          //展开地图数据录入界面
          openMapDataContent(){
            this.openMapDataContentIsShow = !this.openMapDataContentIsShow;
          }
        },
        mounted(){
          //加载图标库
          this.getIconAjax();
          //加载类型
          this.$axios.post(this.DotCtrl+"/mapDictionaryRelation/getRelationInfoList",{
            "parentMenuCode": "MAP_YCSZ",
          })
            .then(res=>{
              //console.log(res);
              let success = res.data;
              let list = [];
              for( let i=0;i<success.length;i++ ){
                success[i].targetMenuCode = success[i].targetMenuCode.split("_")[1];
                list.push(success[i]);
              }
              this.categoryList = list;
              //console.log(this.categoryList);
            })
            .catch(err=>{
              //console.log(err);
            })

        },
    }
</script>

<style scoped>
  .form-control{
    height: 100%;
    border: 1px solid #ccc;
  }
  .fadeInDown,.fadeOutUp{
    animation-duration: .500s;
  }
</style>
